@import './mixin'

.fui-datepicker-lite
  display: inline-block
  width: 100%

  &-wrapper
    display: inline-block
    position: relative
    height: 100%
    width: 100%

  &-input
    @include input-radius-box
    width: 100%
    height: $input-height

  &-icon
    @include flex-xy-center
    position: absolute
    top: 0
    right: 0.5rem
    height: 100%
    cursor: pointer

    &:hover
      svg
        fill: $brand-primary

    svg
      fill: $icon-secondary

  &-container
    margin: 2px 0
    border: 1px solid $border-default
    border-radius: 0.25rem
    overflow: hidden

    .fui-calendar-lite
      border: none
      border-radius: 0

  &-top
    transform-origin: 50% 100%

  &-right
    transform-origin: 0 50%

  &-bottom
    transform-origin: 50% 0

  &-left
    transform-origin: 100% 50%

.fui-calendar-lite

  &-header
    @include calendarPanelHeader

  &-footer
    border-top: 1px solid $border-default
    line-height: 2rem
    padding: 0 12px
    background: $bg-body

    &:empty
      border-top: 0

    &-btn
      @include flex-align(center, space-between)
      font-size: $font-sm

      a
        cursor: pointer

        &:hover
          text-decoration: underline
